<template>
    <div class="main">
        <div class="tool-left">
            <Expand/>
            <Hamburger/>
        </div>
        <div class="linkBox">
            <!--跳转前台首页 start-->
            <el-link :underline="false" href="/">
                <el-icon>
                    <HomeFilled/>
                </el-icon>
                后台首页
            </el-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Expand, HomeFilled} from '@element-plus/icons-vue'
</script>

<style scoped>
.main {
    display: flex;
    justify-content: space-between;
    height: 70px;
    box-shadow: rgb(0 0 0 /10%) 0 0 10px;
    background: white;
}

.linkBox {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    float: right;
}

.linkBox .el-link {
    margin-right: 25px;
    color: #8c8c8c;
}

.linkBox .el-link:hover {
    color: #30bcd7;
}

.linkBox .el-link span {
    margin-left: 8px;
}

/*鼠标滑向头像的样式*/
.info-card img {
    width: 80px;
    margin: 0px 15px 0px 0px;
    border-radius: 50px;
    float: left;
}

.info-card p {
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-left {
    display: flex;
    align-items: center;
    height: 100%;
}
</style>
